<style lang="less">
@import "./home.less";
</style>

<template>
  <div>
    <div v-if="!currNav || currNav == 'xboot'" class="home">
      <Row :gutter="10">
        <!-- 左上侧 用户信息及github链接 -->
        <Col :xs="24" :sm="24" :lg="24" :xl="8">
          <Row :gutter="10">
            <Col style="margin-bottom: 10px; width: 100%">
              <Card :padding="0">
                <div class="welcome-card">
                  <div class="left">
                    <div class="user">
                      <Avatar
                          v-if="avatar"
                          :src="avatar"
                          size="60"
                          class="avator-img"
                      ></Avatar>
                      <Avatar
                          v-else
                          icon="md-person"
                          size="60"
                          class="avator-icon"
                      ></Avatar>
                      <div class="info">
                        <p class="username">Hi, {{ nickname }} !</p>
                        <p class="welcome">欢迎回到XBoot快速开发平台</p>
                      </div>
                    </div>
                    <div class="list">
                      <div class="p">
                        <div class="dot"></div>
                        您当前所在的部门为：{{ departmentTitle }}
                      </div>
                      <div class="p">
                        <div class="dot"></div>
                        您当前的用户类型为：{{ userType }}
                      </div>
                      <div class="p">
                        <div class="dot"></div>
                        本次登录地点：{{ city }}
                      </div>
                    </div>
                  </div>
                  <img
                      class="pic"
                      :src="require('@/assets/icon/computer.svg')"
                  />
                </div>
              </Card>
            </Col>
            <Col style="margin-bottom: 10px; width: 100%">
              <Card>
                <p slot="title">
                  <Icon
                      type="logo-github"
                      size="20"
                      style="margin-right: 5px"
                  />
                  <a href="https://github.com/Exrick/x-boot" target="_blank"
                  >XBoot开源版本地址</a
                  >
                </p>
                <p slot="extra">
                  <a target="_blank" href="http://exrick.cn">作者：Exrick</a>
                </p>
                <div class="timeline-content">
                  <Timeline>
                    <TimelineItem>
                      <Icon
                          type="logo-youtube"
                          color="#fb7299"
                          slot="dot"
                      ></Icon>
                      <a @click="showVideo = true"
                      >作者亲自制作XBoot文字快闪宣传片</a
                      >
                    </TimelineItem>
                    <TimelineItem>
                      <Icon
                          type="logo-youtube"
                          color="#fb7299"
                          slot="dot"
                      ></Icon>
                      <a
                          href="https://www.bilibili.com/video/av23121122/"
                          target="_blank"
                      >作者亲自制作各项目宣传视频 点我观看</a
                      >
                    </TimelineItem>
                    <TimelineItem>
                      <Icon type="md-barcode" color="black" slot="dot"></Icon>
                      <a
                          href="https://github.com/Exrick/Machine-Learning"
                          target="_blank"
                      >个人机器学习笔记</a
                      >
                    </TimelineItem>
                    <TimelineItem>
                      <Icon type="md-cart" color="#f4364c" slot="dot"></Icon>
                      <a href="http://xmall.exrick.cn" target="_blank"
                      >XMall开源分布式商城</a
                      >
                    </TimelineItem>
                    <TimelineItem>
                      <Icon type="md-cash" color="#19be6b" slot="dot"></Icon>
                      <a href="http://xpay.exrick.cn" target="_blank"
                      >XPay开源个人免签支付系统</a
                      >
                    </TimelineItem>
                    <TimelineItem>
                      <Icon type="md-people" color="#57a3f3" slot="dot"></Icon
                      >
                      QQ交流群 475743731(付费) 562962309(免费)
                    </TimelineItem>
                  </Timeline>
                </div>
              </Card>
            </Col>
          </Row>
        </Col>
        <!-- 右上侧 -->
        <Col :lg="24" :xl="16">
          <Row :gutter="10">
            <Col
                :xs="24"
                :sm="24"
                :lg="24"
                :xl="12"
                style="margin-bottom: 10px"
            >
              <Card>
                <p slot="title" style="overflow: visible">
                  <a href="http://xpay.exrick.cn/pay?xboot" target="_blank">
                    <Icon
                        type="ios-star"
                        size="20"
                        style="margin-right: 5px"
                    ></Icon>
                    <Badge dot>立即获取 XBoot 完整版</Badge>
                  </a>
                </p>
                <div class="buy-content">
                  <div class="qr">
                    <img src="@/assets/qr.png" width="130"/>
                    <span class="des">手机扫一扫支付，限时优惠</span>
                  </div>
                  <Alert
                      type="warning"
                      show-icon
                      style="padding: 8px 8px 8px 36px; font-size: 12px"
                  >价格上调提示：App端开发中，价格即将上调，请尽快获取！永久更新！
                  </Alert
                  >
                  <div class="flex">
                    完整版(仅供学习)：
                    <span class="rmb">￥</span>
                    <span class="price">{{ price }}</span>
                    <span class="origin">￥</span>
                    <s class="origin">398</s>
                    <Button
                        to="http://xpay.exrick.cn/pay?xboot"
                        target="_blank"
                        type="error"
                        icon="ios-paper-plane"
                        style="margin-left: 10px"
                    >立即获取
                    </Button
                    >
                  </div>
                  <div class="flex">
                    商用授权：
                    <span class="rmb">￥</span>
                    <span class="price">?998</span>
                    <span class="origin">￥</span>
                    <s class="origin">9998</s>
                    <span class="origin" style="font-size: 8px">起</span>
                    <Button
                        to="http://wpa.qq.com/msgrd?v=3&uin=1012139570&site=qq&menu=yes"
                        target="_blank"
                        type="warning"
                        icon="logo-vimeo"
                        style="margin-left: 10px"
                    >获取商用授权
                    </Button
                    >
                    <br/>
                  </div>
                  <Alert style="padding: 8px 16px 8px 16px; font-size: 12px">
                    支付后源码和更新维护群将自动发至您在支付页面所填写的邮箱，
                    <span class="light">
                      完整版与商用版都拥有在线demo全部功能，提供永久免费更新，但前者仅供学习使用。</span
                    >
                    开源版本请遵循GPLv3.0开源协议，
                    <span class="light">不得闭源</span
                    >，商用需求请联系作者签署授权协议。
                    价格可能随功能逐渐完善或物价变化。
                  </Alert>
                </div>
              </Card>
            </Col>
            <Col :xs="24" :sm="24" :xl="12" style="margin-bottom: 10px">
              <Card>
                <p slot="title">
                  <Icon type="md-bookmark" style="margin-right: 5px"></Icon
                  >
                  ISSUE/评论/更新日志
                </p>
                <div id="comments" class="comment-container"></div>
              </Card>
            </Col>
          </Row>
        </Col>
      </Row>
      <Row :gutter="10">
        <Col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :style="{ marginBottom: '10px' }"
        >
          <card1
              id="card1"
              prefix="￥"
              :end-val="count.data1"
              title="今日销售额"
              :image="require('@/assets/icon/money.png')"
              width="34px"
              height="34px"
          />
        </Col>
        <Col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :style="{ marginBottom: '10px' }"
        >
          <card2
              id="card2"
              suffix="%"
              :end-val="count.data2"
              color="#f90"
              title="销售量增长"
              description="相比昨日"
          />
        </Col>
        <Col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :style="{ marginBottom: '10px' }"
        >
          <card4
              title="待办事项"
              :time="time"
              description="您有一个新的待审批任务，请前往查看"
          />
        </Col>
        <Col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :style="{ marginBottom: '10px' }"
        >
          <card3
              title="应用中心"
              description="销量统计，用户统计，日活分析"
              :image="require('@/assets/icon/app.png')"
              width="34px"
              height="34px"
              titleSize="18px"
          />
        </Col>
      </Row>
      <Row :gutter="10">
        <Col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="4"
            :style="{ marginBottom: '10px' }"
        >
          <cardApp icon="logo-buffer" title="SaaS应用"/>
        </Col>
        <Col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="4"
            :style="{ marginBottom: '10px' }"
        >
          <cardApp activeColor="#2db7f5" icon="md-bookmarks" title="日志分析"/>
        </Col>
        <Col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="4"
            :style="{ marginBottom: '10px' }"
        >
          <cardApp activeColor="#19be6b" icon="md-cloud" title="云运维"/>
        </Col>
        <Col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="4"
            :style="{ marginBottom: '10px' }"
        >
          <cardApp activeColor="#f90" icon="md-film" title="视频监控"/>
        </Col>
        <Col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="4"
            :style="{ marginBottom: '10px' }"
        >
          <cardApp activeColor="#8950fc" icon="md-stats" title="数据分析"/>
        </Col>
        <Col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="4"
            :style="{ marginBottom: '10px' }"
        >
          <cardApp activeColor="#ed4014" icon="md-people" title="用户分析"/>
        </Col>
      </Row>
      <Row :gutter="10">
        <Col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :style="{ marginBottom: '10px' }"
        >
          <card1
              id="card5"
              :bordered="false"
              :end-val="126778"
              title="今日新增互动数"
              backgroundColor="#fff4df"
              :image="require('@/assets/icon/comment.png')"
              width="34px"
              height="34px"
          />
        </Col>
        <Col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :style="{ marginBottom: '10px' }"
        >
          <card1
              id="card6"
              :bordered="false"
              :end-val="68893"
              backgroundColor="#6993fe"
              countColor="#fff"
              icon="md-person-add"
              iconColor="#fff"
              titleColor="#fff"
              title="今日新增用户"
          />
        </Col>
        <Col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :style="{ marginBottom: '10px' }"
        >
          <card1
              id="card7"
              :bordered="false"
              :end-val="count.data4"
              backgroundColor="#8950fe"
              countColor="#fff"
              icon="md-cloud-download"
              iconColor="#fff"
              titleColor="#fff"
              title="今日下载量"
          />
        </Col>
        <Col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :style="{ marginBottom: '10px' }"
        >
          <card1
              id="card8"
              :bordered="false"
              :end-val="13507632434"
              backgroundColor="#f64e61"
              countColor="#fff"
              icon="md-calendar"
              iconColor="#fff"
              titleColor="#fff"
              title="月活"
          />
        </Col>
      </Row>
      <Row :gutter="10">
        <Col
            :xs="24"
            :sm="24"
            :lg="24"
            :xl="16"
            :style="{ marginBottom: '10px' }"
        >
          <visitVolume/>
        </Col>
        <Col
            :xs="24"
            :sm="24"
            :lg="24"
            :xl="8"
            :style="{ marginBottom: '10px' }"
        >
          <visitSeparation/>
        </Col>
      </Row>
    </div>
    <div v-if="currNav == 'app'">
      <Dashboard/>
    </div>


  </div>
</template>

<script>
import {ipInfo, getNotice} from "@/api/index";
import visitVolume from "./components/visitVolume.vue";
import visitSeparation from "./components/visitSeparation.vue";
import card1 from "@/views/my-components/widget/card1.vue";
import card2 from "./components/card2.vue";
import card3 from "@/views/my-components/widget/card3.vue";
import card4 from "@/views/my-components/widget/card4.vue";
import cardApp from "./components/cardApp.vue";
import Dashboard from "@/views/xboot-charts/dashboard2/dashboard2.vue";
import Cookies from "js-cookie";
import Gitalk from "gitalk";

export default {
  name: "home",
  components: {
    visitVolume,
    visitSeparation,
    card1,
    card2,
    card3,
    card4,
    cardApp,
    Dashboard,
  },
  data() {
    return {
      showVideo: false,
      count: {
        data1: 5396,
        data2: 68,
        data3: 19305,
        data4: 39503498,
      },
      city: "未知",
      departmentTitle: "无",
      userType: "无",
      time: "",
      price: "...",
    };
  },
  computed: {
    currNav() {
      return this.$store.state.app.currNav;
    },
    nickname() {
      return this.$store.state.user.nickname;
    },
    avatar() {
      return this.$store.state.user.avatar;
    },
  },
  methods: {
    init() {
      let userInfo = this.getUserInfo();
      this.departmentTitle = userInfo.departmentTitle;
      if (userInfo.type == "0") {
        this.userType = "普通用户";
      } else if (userInfo.type == "1") {
        this.userType = "管理员";
      }
      ipInfo().then((res) => {
        if (res.success) {
          this.city = res.result;
        }
      });
      this.time = this.format(new Date(), "yyyy年MM月dd日");
    },
    showNotice() {
      getNotice().then((res) => {
        if (res.success) {
          if (!res.result) {
            return;
          }
          let data = res.result;
          if (
              data.open &&
              (data.title || data.content) &&
              data.position == "HOME"
          ) {
            this.$Notice.info({
              title: data.title,
              desc: data.content,
              duration: data.duration,
            });
          }
        }
      });
    },
  },
  mounted() {
    this.init();
    // 通知
    let noticeFlag = "noticeShowed";
    let notice = Cookies.get(noticeFlag);
    if (notice != noticeFlag) {
      this.showNotice();
      Cookies.set(noticeFlag, noticeFlag);
    }
    // 价格
    AV.init({
      appId: "6Bstbxl4NDU69I77D3nzf61h-gzGzoHsz",
      appKey: "gaFTnYlTul3M8qdiGlbfvoJK",
      serverURL: "https://6bstbxl4.lc-cn-n1-shared.com",
    });
    const query = new AV.Query("Price");
    query.equalTo("objectId", "6080216c2a5bb23590bcaedb");
    query.first().then((e) => {
      this.price = e.attributes.price;
    });
    // Gitalk
    var gitalk = new Gitalk({
      clientID: "a128de2dd7383614273a",
      clientSecret: "a77691ecb662a8303a6c686ae651ae035868da6e",
      repo: "xboot-comments",
      owner: "Exrick",
      admin: ["Exrick"],
      distractionFreeMode: false, // 遮罩效果
    });
    try {
      gitalk.render("comments");
    } catch (err) {
    }
    // 宣传视频
    let videoFlag = "videoShowed";
    let xbootVideo = Cookies.get(videoFlag);
    if (xbootVideo != videoFlag) {
      this.showVideo = true;
      Cookies.set(videoFlag, videoFlag);
    }
  },
};
</script>
